<template>
    <div class="my-code" :data-font="$i18n.locale">
        <el-input v-model="content" :placeholder="placeholder"></el-input>
        <el-button @click.stop="getCode" :disabled="disabled = !show" :loading="loading">
            <span v-show="show">{{ titles }}</span>
            <span v-show="!show" class="count">{{ count }} s</span>
        </el-button>
    </div>
</template>

<script>
import { getPhoneCode, getEmailCode } from "@/request/api"
export default {
    name: 'my-code',
    props: {
        placeholder: {
            type: [String, Number],
            default: ''
        },
        value: {
            type: [String, Number],
            default: ''
        },
        rules: {
            type: Object,
            default() {
                return {}
            }
        },
        max: {
            type: Number,
            default: null
        },
        type: {
            type: String,
            default: 'phone'
        },
    },
    data() {
        return {
            content: '',
            show: true,  // 初始启用按钮
            count: '',   // 初始化次数
            timer: null,
            isSendCode: false,
            title: 0,
            loading: false,
        }
    },
    methods: {
        getCode() {
            this.$emit('getRule');
            if (this.value) {
                this.loading = true
                if (this.type === 'phone') {
                    getPhoneCode({ phone: this.value }).then(res => {
                        console.log(res);
                        this.loading = false;
                        this.SendCode()
                    })
                } else if (this.type === 'email') {
                    getEmailCode({ email: this.value }).then(res => {
                        console.log(res);
                        this.SendCode()
                        this.loading = false
                    })
                }
            }
        },
        SendCode() {
            this.isSendCode = true;
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);  // 清除定时器
                        this.timer = null;
                        this.title = '1'
                    }
                }, 1000)
            };
        },
    },
    watch: {
        content: {
            deep: true,
            handler(newVal, oldVal) {
                this.$emit('message', newVal)
            },
            immediate: true
        }
    },
    computed: {
        titles() {
            let title = this.$t('account.getCode');
            if (this.title === '1') {
                title = this.$t('account.resend');
            } else {
                title = this.$t('account.getCode');
            }
            return title
        }
    },
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },
}

</script>

<style lang="less" scoped>
.my-code {
    width: 100%;
    height: 1.6rem;
    background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
    border-radius: 0.21rem;
    border: 0.03rem solid #C5C5CA;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    overflow: hidden;

    .el-button {
        float: right;
        border: none;
        height: 100%;
        padding: 0 0.43rem;
        outline: none;
        background-color: #fff;
    }

    .el-button:hover {
        background: none;
        background-color: #fff;
    }

    .el-button:focus {
        background: none;
        background-color: #fff;
    }

    .el-input {
        height: 100%;
        flex: 1;
        outline: none;
        border: none;
        box-shadow: none;
    }

    .el-input:focus {
        border: none !important;
    }

    .el-input :deep(.is-focus) {
        box-shadow: none;
    }

    .el-input :deep(.el-input__wrapper) {
        box-shadow: none;
    }
}

.my-code[data-font='zh'] {
    .el-button {
        :deep(span) {
            font-size: 0.53rem;
            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            color: #7709CC;
            line-height: 0.85rem;
        }
    }

    .el-input :deep(.el-input__inner) {
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        line-height: 0.85rem;
    }

    .el-input :deep(.el-input__inner::placeholder) {
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #C5C5CA;
        line-height: 0.85rem;
    }
}

.my-code[data-font='en'] {
    .el-button {
        :deep(span) {
            font-size: 0.53rem;
            font-family: 'PingFangSC-Regular', 'PingFang SC';
            font-weight: 400;
            color: #7709CC;
            line-height: 0.85rem;
        }
    }

    .el-input :deep(.el-input__inner) {
        font-size: 0.48rem;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        line-height: 0.75rem;
    }

    .el-input :deep(.el-input__inner::placeholder) {
        font-size: 0.48rem;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        color: #C5C5CA;
        line-height: 0.75rem;
    }
}
</style>